<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>每天定时推送任务列表</title>
    <!-- 移动端适配关键meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入Vue3和axios -->
    <script src="vue.global.min.js"></script>
    <script src="axios.min.js"></script>
    <!-- 引入Bootstrap样式 -->
    <link href="bootstrap.min.css" rel="stylesheet">
    <style>
        /* 移动端优化样式 */
        @media (max-width: 768px) {
            .form-control {
                margin-bottom: 8px;
            }
            .mobile-stack {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div id="app" class="container mt-2 mt-md-4">
    <!-- 响应式表单 -->
    <div class="row mb-3 mobile-stack">
        <div class="col-md-2 col-12 mb-2">
            <input type="time" class="form-control form-control-sm"
                   placeholder="时间" v-model="newItem.time">
        </div>
        <div class="col-md-3 col-12 mb-2">
            <input type="text" class="form-control form-control-sm"
                   placeholder="用户ID" v-model="newItem.userId">
        </div>
        <div class="col-md-2 col-12 mb-2">
            <input type="text" class="form-control form-control-sm"
                   placeholder="标题" v-model="newItem.title">
        </div>
        <div class="col-md-3 col-12 mb-2">
            <input type="text" class="form-control form-control-sm"
                   placeholder="内容" v-model="newItem.content">
        </div>
        <div class="col-md-2 col-12">
            <button class="btn btn-primary btn-sm w-100"
                    @click="addItem">添加</button>
        </div>
    </div>

    <!-- 响应式表格 -->
    <div class="table-responsive">
        <table class="table table-hover table-sm">
            <thead class="d-none d-md-table-header-group">
            <tr class="fs-6">
                <th>时间</th>
                <th>用户ID</th>
                <th>标题</th>
                <th>内容</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in listData" :key="index" class="align-middle">
                <!-- 移动端卡片式布局 -->
                <td class="d-md-table-cell">
                    <div class="d-md-none fw-bold">时间：</div>
                    {{ item.time }}
                </td>
                <td class="d-md-table-cell">
                    <div class="d-md-none fw-bold">用户ID：</div>
                    {{ item.userId }}
                </td>
                <td class="d-md-table-cell">
                    <div class="d-md-none fw-bold">标题：</div>
                    {{ item.title }}
                </td>
                <td class="d-md-table-cell">
                    <div class="d-md-none fw-bold">内容：</div>
                    {{ item.content }}
                </td>
                <td>
                    <button class="btn btn-danger btn-sm w-100 w-md-auto"
                            @click="deleteItem(index)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 保存按钮 -->
    <div class="text-center text-md-end mt-3">
        <button class="btn btn-success btn-sm px-4"
                @click="saveList">保存列表</button>
    </div>
</div>

<script>
    const { createApp } = Vue
    createApp({
        data() {
            return {
                listData: [],
                newItem: {
                    userId: '',
                    content: '',
                    time: '',
                    title: ''
                }
            }
        },
        mounted() {
            this.fetchData()
        },
        methods: {
            async fetchData() {
                try {
                    const response = await axios.get('/api/task')
                    this.listData = response.data.data
                } catch (error) {
                    console.error('获取数据失败:', error)
                }
            },
            addItem() {
                if (this.newItem.userId && this.newItem.content) {
                    const time = this.newItem.time ?
                        `${this.newItem.time}:00` :
                        new Date().toLocaleTimeString('zh', {
                            hour12: false,
                            hour: '2-digit',
                            minute: '2-digit'
                        })
                    this.listData.push({
                        ...this.newItem,
                        time: time
                    })
                    this.newItem = { userId: '', content: '', time: '', title: '' }
                }
            },
            deleteItem(index) {
                if(confirm('确定要删除此项？')) {
                    this.listData.splice(index, 1)
                }
            },
            async saveList() {
                try {
                    const response = await axios.post('/api/task',
                        this.listData, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        })
                    alert('保存成功！')
                    console.log('服务器响应:', response.data.data)
                } catch (error) {
                    console.error('保存失败:', error)
                    alert('保存失败，请检查控制台')
                }
            }
        }
    }).mount('#app')
</script>
</body>
</html>